import styles from './index.module.scss'
import { NavBar, Popup, TextArea, Toast } from 'antd-mobile'
import { useState } from 'react'
import { useDispatch } from 'react-redux'
import { addCommentAction } from '@/store/action/article'
import { useParams } from 'react-router-dom'
type Props = {
  // 评论的作者的名字
  name?: string
  visible: boolean
  close: () => void
}
export default function CommentInput({ close, visible, name }: Props) {
  const [input, setInput] = useState('')
  const dispatch = useDispatch()
  const params = useParams<{ id: string }>()
  const submitCom = async () => {
    // 非空判断
    if (!input) return
    // console.log('input:', input)
    // console.log('发表评论')
    await dispatch(addCommentAction({ target: params.id, content: input }))
    Toast.show({
      icon: 'success',
      content: '发表成功',
    })
    close()
  }
  return (
    <Popup bodyStyle={{ height: '100vh' }} visible={visible}>
      <div className={styles.root}>
        <NavBar
          onBack={close}
          right={
            <span onClick={submitCom} className="publish">
              发表
            </span>
          }
        >
          {name ? '回复评论' : '评论文章'}
        </NavBar>
        <div className="input-area">
          {/* 回复别人的评论时显示：@某某 */}
          {name && <div className="at">@{name}:</div>}

          {/* 评论内容输入框 */}
          <TextArea
            value={input}
            onChange={setInput}
            placeholder="说点什么~"
            rows={10}
          />
        </div>
      </div>
    </Popup>
  )
}
